<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>查询结果</title>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">-->
    <link rel="stylesheet" href="../../../resource/css/index.css">
</head>
<body>
<div id="app">
<template>
<div>
  <div v-if="listgroup.length > 0">
    <van-panel v-for="item in listgroup" :key="item.id">
      <div slot="header" class="tip" v-text="item.date"></div>
      <div><van-cell :title="item.area" :label="item.act" :url="`violationdetail.html?archiveno=${item.archiveno}`" is-link /></div>
      <div slot="footer" class="fdes">     
        <img src="https://a.icons8.com/ogaMpeYZ/GTSkbV/分组.png" alt=""> ¥<span v-text="item.money"></span>
        <img src="https://a.icons8.com/ogaMpeYZ/cGYHYB/分组.png" alt=""> <span v-text="item.fen"></span>分
      </div>
    </van-panel>
  </div>
  <div class="divtip" v-else>
    <img :src="tipico" class="ximg"></img>
    <p v-text="tips"></p>
  </div>
</div>
</template>
</div>
<!--<script src="http://vuejs.org/js/vue.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>-->
<!--<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>-->
<!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>-->
<script src="../../../resource/js/vue.min.js"></script>
<script src="../../../resource/js/vant.min.js"></script>
<script src="../../../resource/js/magjs-x.js"></script>
<script src="../../../resource/js/vue-router.js"></script>
<script src="../../../resource/js/axios.min.js"></script>
<script src="../../../resource/js/qs.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
      title: '查询结果',
      listgroup: [],
      tipico: 'http://download.bihuapp.com/icon/pic.png',
      tips: '暂无车辆，快去添加吧~'
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    mag.toLogin(function(rs) {
        this.token = rs.token
        localStorage.setItem('token', rs.token)
        this.fetchData()
    })
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    // '$route': 'fetchData'
  },
  // beforeRouteEnter (to, from, next) {
  //   console.log(to)
  // },
  methods: {
    fetchData () {
      let that = this
      let params = this.getRequest()
      let postparams = {
        token: localStorage.getItem('token'),
        car_code: params.cc,
        engine_code: params.ec,
        class_code: params.sc
      }
      axios.post('/Rule/getUserPeccancyInfo', postparams).then(({data}) => {
        if (data.code === 200) {
          let datas = data.data
          that.listgroup = datas
        } else {
          that.listgroup = ''
          that.tips = data.msg
        }
      })
    },
    getRequest() {
      let url = window.location.search //获取url中"?"符后的字串
      let theRequest = new Object()
      if (url.indexOf("?") != -1) {
        let str = url.substr(1)
        strs = str.split("&")
        for(var i = 0; i < strs.length; i ++) {          
          theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1])          
        }
      }
      return theRequest
    }
  }
})
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.white{
  fill: #fff;
}
.tip{
  font-size: 12px;
  color: #898989;
  padding-left: 15px;
  padding-top: 10px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}

.fdes {
  font-size: 14px;
}
.fdes>img{
  vertical-align: bottom;
}

.cline,
.cline::before,
.cline::after{
  border: none;
}
input[type=text]{
  border: none;
  background: transparent;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  text-align: right;
  color: #808080;
    
}
.plateNumberBox input[type=text]{
  color: #4F91F2;
  text-align: center;
  padding-left: 60px;
}
.foottip{
  font-size: 12px;
  position: fixed;
  bottom: 15px;
}
.divtip{
  text-align: center;
}
.ximg{
    max-width: 40%;
    display: block;
    margin: 10px auto;
}
p{
  text-align: center;
  font-size: 14px;
  color: #898989;
  margin-top: 10px;
}
</style>
</body>
</html>
